<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #box {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        #bd1 {
            width: 100%;
            height: 50px;
            border-bottom: 5px solid #3296e8;
        }

        #bd1>div {
            width: 1200px;
            height: 50px;
            margin: 0 auto;
            line-height: 50px;
        }

        #bd1>div>img {
            height: 50px;
        }

        #bd1>div>a {
            vertical-align: top;
            float: right;
            text-decoration: none;
        }

        #p1 {
            width: 1200px;
            height: 15px;
            margin: 0 auto;
            line-height: 15px;
            font-size: 14px;
            font-weight: 700;
        }

        #bd2 {
            width: 1200px;
            height: 40px;
            margin: 0 auto 5px;
            overflow: hidden;

        }

        #bd2>div {
            width: 300px;
            height: 40px;
            float: left;
            /* background-color: #3296e8; */
            background-color: rgb(200, 200, 200);
            position: relative;
        }

        #bd2>div::after {
            content: "";
            width: 0px;
            height: 0px;
            border-style: solid;
            border-width: 20px 0 20px 30px;
            border-color: transparent transparent transparent rgb(200, 200, 200);
            display: block;
            position: absolute;
            top: 0px;
            left: 300px;
            z-index: 3;
        }

        #bd2>div::before {
            content: "";
            position: absolute;
            width: 0px;
            height: 0px;
            border-style: solid;
            border-width: 24px 0 24px 35px;
            border-color: transparent transparent transparent #ffffff;
            top: -4px;
            left: 300px;
            z-index: 2;
        }

        #bd2>div:first-child {
            background-color: #3296e8;

        }

        #bd2>div:first-child::after {
            border-color: transparent transparent transparent #3296e8;

        }

        #bd2>div {
            color: #000;
            text-align: center;
            line-height: 40px;
        }

        #bd3 {
            /* margin-top: 5px; */
            width: 1200px;
            height: 1500px;
            margin: 0 auto;
            border: 3px solid #c1c1c1;
            box-sizing: border-box;
        }

        #bd3>div {
            width: 1150px;
            height: 1450px;
            margin: 25px auto;
            border: 1px solid #c1c1c1;
            box-sizing: border-box;
        }

        .p2 {
            width: 1150px;
            height: 30px;
            line-height: 30px;
            margin: 0 auto;
            font-size: 20px;
            border-bottom: 4px solid #c1c1c1;
            font-weight: 600;
        }

        .p2>span {
            color: #eb1105;
            font-size: 14px;
            font-weight: 300;
        }

        #bd3>div>form {
            width: 900px;
            height: 500px;
            margin: 0 auto;
            /* background-color: #3296e8; */
        }

        #f1>div {
            overflow: hidden;
            margin-top: 8px;
        }

        #f1>div>div {
            width: 500px;
            height: 30px;
            /* margin: 0 auto; */
            /* border: 1px solid #000; */
            box-sizing: border-box;
            float: right;
            position: relative;
        }

        #f1 {
            overflow: hidden;
            height: 30px;
            line-height: 30px;
        }

        #f1 span {
            float: left;
            /* display: block; */
        }

        #f1>div:nth-child(1)>div:nth-child(2)>input {
            width: 200px;
            height: 25px;
            outline: none;
            vertical-align: top;
            font-size: 18px;
        }

        #f1>div:nth-child(2)>div:nth-child(2)>input {
            outline: none;
            /* vertical-align: top; */
            /* font-size: 18px; */
        }

        #f1>div:nth-child(3)>div:nth-child(2)>input,
        #f1>div:nth-child(4)>div:nth-child(2)>select {
            outline: none;
            vertical-align: top;
            /* font-size: 18px; */
            width: 50px;
            height: 25px;
        }

        #f1>div:nth-child(5)>div:nth-child(2)>select,
        #f1>div:nth-child(6)>div:nth-child(2)>select {
            outline: none;
            vertical-align: top;
            /* font-size: 18px; */
            width: 150px;
            height: 25px;
        }

        #f1>div:nth-child(7)>div:nth-child(2)>input,
        #f1>div:nth-child(8)>div:nth-child(2)>input {
            width: 200px;
            height: 25px;
            outline: none;
            vertical-align: top;
            font-size: 18px;
        }

        #f1>div:nth-child(10)>div:nth-child(2)>select {
            width: 200px;
            height: 25px;
            outline: none;
            vertical-align: top;
            font-size: 18px;
        }

        #f1>div:nth-child(11)>div:nth-child(2)>select,
        #f1>div:nth-child(11)>div:nth-child(2)>input {
            width: 200px;
            height: 25px;
            outline: none;
            vertical-align: top;
            font-size: 18px;
        }

        #f1>div:nth-child(11)>div:nth-child(2)>input {
            margin-bottom: 1px;
            /* line-height: 30px; */
        }

        #f2>div {
            overflow: hidden;
            margin-top: 8px;
        }

        #f2>div>div {
            width: 500px;
            height: 30px;
            /* margin: 0 auto; */
            /* border: 1px solid #000; */
            box-sizing: border-box;
            float: right;
            position: relative;
        }

        #f2 {
            overflow: hidden;
            height: 30px;
            line-height: 30px;
            height: 300px !important;
        }

        #f2 span {
            float: left;
            /* display: block; */
        }

        #f2>div:nth-child(1)>div:nth-child(2) {
            line-height: 30px;
        }

        #f2>div:nth-child(1)>div:nth-child(2)>input {
            width: 20px;
            height: 20px;
            vertical-align: middle;
            margin-top: -5px;
        }

        #f2>div:nth-child(2)>div:nth-child(2)>select,
        #f2>div:nth-child(3)>div:nth-child(2)>select,
        #f2>div:nth-child(4)>div:nth-child(2)>select {
            width: 200px;
            height: 25px;
            outline: none;
            vertical-align: middle;
            margin-top: -5px;
        }

        #f2>div:nth-child(5)>div:nth-child(2)>select,
        #f2>div:nth-child(6)>div:nth-child(2)>select {
            width: 200px;
            height: 25px;
            outline: none;
            vertical-align: middle;
            margin-top: -5px;
        }

        #f2>div:nth-child(7)>div:nth-child(2)>input {
            width: 20px;
            height: 20px;
            vertical-align: middle;
            margin-top: -5px;
        }

        #f3>div {
            /* overflow: hidden; */
            margin-top: 8px;
        }

        #f3>div>div {
            width: 500px;
            height: 30px;
            /* margin: 0 auto; */
            /* border: 1px solid #000; */
            box-sizing: border-box;
            float: right;
            position: relative;
        }

        #f3 {
            overflow: hidden;
            height: 30px;
            line-height: 30px;
            height: 450px !important;
        }

        #f3>div:nth-child(3)>div:nth-child(2) {
            height: 200px;
            overflow: hidden;
            /* border: 1px solid black; */
        }
        #f3>div:nth-child(3)>div:nth-child(2)>textarea{
            resize: none;
            overflow-y: scroll;
        }
        #f3>button{
            display: block;
            background-color: #289ce3;
            width: 100px;
            height: 30px;
            margin-left: 100px;
            margin: 150px auto 0px;
            cursor: pointer;
            border: none;
            color: #fff;
            transition: all 1s;
        }
        #f3>button:hover{
            background-color: rgb(146, 186, 250);
        }
        #f3>div:nth-child(2)>div:nth-child(2)>select{
            width: 200px;
            height: 25px;
            outline: none;
            vertical-align: middle;
            margin-top: -5px;
        }
        #last{
            width: 150px;
             border: 2px solid black;
            box-sizing: border-box;
            height: 90px;
            border-radius: 5px;
            position: relative;
            top: -0px;
            left: 748px;
            overflow: visible;
            background-color: #eaeaea;
        }
        #last>span{
            font-size: 20px;
            color: #eb1105;
        }
        #box #f3 #last>div{
            width: 0px;
            height: 0px;
            border-color:   transparent #000000 transparent  transparent ;
            border-style: solid;
            border-width:0px  32px 24px 0px;
            position: absolute;
            top: 8px;
            left: -32px;
        }
        #last::after{
            content: "";
            width: 0px;
            height: 0px;
            border-color:   transparent #eaeaea transparent  transparent ;
            border-style: solid;
            border-width:0px  28px 20px 2px;
            position: absolute;
            top: 10px;
            left: -30px;
        }
        #bd4{
            width: 1150px;
            margin:  10px auto;
            height: 100px;
            border-top: 5px solid #289ce3;
        }
        #bd4>p:first-child{
            width: 950px;
            height: 20px;
            background-color: #a01a8f;
            margin: 10px auto;
        }
        #bd4>p:nth-child(2){
            width: 750px;
            height: 20px;
            background-color: #02a90e;
            margin: 10px auto;
        }
        #bd4>p:nth-child(3){
            width: 750px;
            height: 20px;
            background-color: #48cd6e;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div id="box">
        <div id="bd1">
            <div><img src="./img/智联招聘logo_02.gif"><a href="#">返回我的智联</a></div>
        </div>
        <p id="p1">完整的简历可以帮助你获取理想的工作机会，赶快开始创建吧!</p>
        <div id="bd2">
            <div>基本情况<div></div>
            </div>
            <div>教育与工作<div></div>
            </div>
            <div>附加信息<div></div>
            </div>
            <div>完成<div></div>
            </div>
        </div>
        <div id="bd3">
            <div>
                <p class="p2">个人信息&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<span>*为必须填</span></p>
                <form id="f1">
                    <div><span>*姓名</span>
                        <div><input type="text"></div>
                    </div>
                    <div><span>*性别</span>
                        <div><input type="radio" name="sex"> 男 <input type="radio" name="sex"> 女 </div>
                    </div>
                    <div><span>*出生日期</span>
                        <div>
                            <input type="text" value="1990">年<input type="text" value="7">月
                        </div>
                    </div>
                    <div><span>*参加工作年份</span>
                        <div><select>
                                <option value="">2009年2月</option>
                            </select></div>
                    </div>
                    <div><span>*户口所在地</span>
                        <div><select>
                                <option value="">北京</option>
                            </select></div>
                    </div>
                    <div><span>*现居住城市</span>
                        <div>
                            <select>
                                <option value="">北京</option>
                            </select>
                        </div>
                    </div>
                    <div><span>*联系方式</span>
                        <div>
                            <input type="text" value="">
                        </div>
                    </div>
                    <div><span>*电子邮箱</span>
                        <div>
                            <input type="text" value="">
                        </div>
                    </div>
                    <div><span>*婚姻状况</span>
                        <div>
                            <input type="radio" name="marry"> 未婚 <input type="radio" name="marry"> 已婚 <input
                                type="radio" name="marry"> 离异
                        </div>
                    </div>
                    <div><span>*国籍</span>
                        <div>
                            <select>
                                <option value="">中国大陆</option>
                            </select>
                        </div>
                    </div>
                    <div><span>*证件</span>
                        <div>
                            <select name="" id="">
                                <option value="">身份证</option>
                            </select>
                            <input type="text" value="">
                        </div>
                    </div>
                    <div><span>*海外工作/学习经历</span>
                        <div>
                            <input type="radio" name="study"> 无 <input type="radio" name="study"> 有
                        </div>
                    </div>
                    <div><span>*政治面貌</span>
                        <div>
                            <input type="radio" name="political"> 群众
                            <input type="radio" name="political"> 党员
                            <input type="radio" name="political"> 其他
                            <input type="radio" name="political" value=""> 团员
                            <input type="radio" name="political"> 武当派
                            <input type="radio" name="political"> 民主党
                        </div>
                    </div>
                </form>
                <p class="p2">求职意向&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<span>*为必须填</span></p>
                <form id="f2">
                    <div><span>*期望工作性质</span>
                        <div><input type="checkbox"> 全职 <input type="checkbox"> 兼职 <input type="checkbox"> 实习 </div>
                    </div>
                    <div><span>*期望工作地点</span>
                        <div><select>
                                <option>选择/修改</option>
                            </select></div>
                    </div>
                    <div><span>*期望从事职业</span>
                        <div>
                            <select>
                                <option>选择/修改</option>
                            </select>
                        </div>
                    </div>
                    <div><span>*期望从事行业</span>
                        <div>
                            <select>
                                <option>选择/修改</option>
                            </select>
                        </div>
                    </div>
                    <div><span>*期望月薪(税前)</span>
                        <div>
                            <select>
                                <option>请选择</option>
                            </select>/月
                        </div>
                    </div>
                    <div><span>*工作状态</span>
                        <div>
                            <select>
                                <option>我目前处于离职状态，可立即上岗</option>
                            </select>
                        </div>
                    </div>
                    <div>
                        <div><input type="checkbox">将此求职意向显示在我的简历中</div>
                    </div>
                </form>
                <p class="p2">自我评价&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<span>*为必须填</span></p>
                <form id="f3">
                    <p>请简短叙述你的工作业绩、拥有的技能及特殊的专长，以更好的向企业展现自己。</p>
                    <div><span>*标题</span>
                        <div><select>
                                <option>自我评价</option>
                            </select></div>
                    </div>
                    <div><span>*内容</span>
                        <div>
                            <textarea cols="50" rows="10">
                        </textarea>范例1 范例2
                        </div>
                    </div>
                    <div id="last">你可以输入<span>250</span>字<div></div></div>
                    <button>保存并下一步</button>
                </form>
            </div>
        </div>
        <div id="bd4">
            <p></p>
            <p></p>
            <p></p>
        </div>
    </div>
</body>

</html>